<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>版本推广管理</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#" @click="$router.go(-1)">渠道管理-下载渠道App</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>下载渠道APP发布历史</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <el-row>
        <el-col :span="16">
          <el-form
            ref="form"
            :model="identifyPackage"
            label-width="220px"
            v-if="identifyList.length != 0"
          >
            <el-form-item label="">
              <el-button type="primary" @click="openPush = true"
                >一键发布版本</el-button
              >
            </el-form-item>

            <el-form-item label="状态："> 已打包 </el-form-item>

            <el-form-item label="发布apk历史：">
              <el-select
                v-model="selectIdentifyId"
                placeholder="请选择"
                @change="getAppChannelPackageById"
              >
                <el-option
                  v-for="(identify, i) in identifyList"
                  :key="i"
                  :label="identify.package_count_identify"
                  :value="identify.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="渠道App渠道号：">
              {{ identifyPackage.channel_id }}
            </el-form-item>
            <el-form-item label="渠道App渠道包版本：">
              {{ identifyPackage.package_version }}
            </el-form-item>

            <el-form-item label="渠道App下载链接：">
              <a :href="identifyPackage.package_url">
                <el-button type="primary">点击下载包</el-button>
              </a>
            </el-form-item>

            <el-form-item label="渠道App下载链接：">
              <el-input :value="identifyPackage.package_url"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-button @click="$router.go(-1)" type="primary">返回</el-button>
            </el-form-item>
          </el-form>
          <div v-else>
            暂无发布历史信息
            <el-button @click="$router.go(-1)">返回</el-button>
          </div> </el-col
        ><el-col :span="8"></el-col>
      </el-row>
    </basic-container>

    <!-- 最后确认框 -->
    <el-dialog
      title="版本发布"
      :visible.sync="openPush"
      width="30%"
      append-to-body
    >
      <span>请再次确认发布的应用包是否全部正常?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openPush = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            () => {
              openPush = false;
              openAddVersion = true;
            }
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--  -->
    <el-dialog
      title="版本发布"
      :visible.sync="openAddVersion"
      width="50%"
      :before-close="handleClose"
      :fullscreen="true"
      append-to-body
    >
      <el-form
        :model="version"
        label-width="120px"
        :rules="rules"
        ref="ruleForm"
        style="width: 68%;margin: auto;"
      >
        <el-form-item label="项目名称：">
          <el-input value="橘子猫轻小说"></el-input>
        </el-form-item>
        <el-form-item label="启用状态：" prop="using_state">
          <el-select v-model="version.using_state" placeholder="选择启停状态" class="select100">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="停用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本号：" prop="versions">
          <el-input v-model="version.versions"></el-input>
        </el-form-item>
        <el-form-item label="是否强制升级：" prop="is_force_upgrade">
          <el-select
            v-model="version.is_force_upgrade"
            placeholder="选择启停状态"
            class="select100"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本数字标识：" prop="version_number">
          <el-input
            v-model="version.version_number"
            placeholder="版本数字标识"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="notes">
          <el-input
            type="textarea"
            v-model="version.notes"
            :autosize="{ minRows: 10, maxRows: 18 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="请选择渠道：">
          <table
            border="1"
            width="100%"
            bgcolor="#fafafa"
            cellpadding="2"
            style="text-align: center"
          >
            <tr>
              <th>渠道App标识</th>
              <th>渠道App下载链接</th>
            </tr>
            <tr>
              <td>{{ version.channel_id }}</td>
              <td>{{ version.realese_url }}</td>
            </tr>
          </table>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button  @click="openAddVersion=false">取消</el-button>
        <el-button type="primary" @click="rowSave">发布 版本</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { catUrl } from "@/config/env";
import { common } from "@/api/cat/httpRequest";
import {
  appChannelPackCount as baseUrl,
  versionManager,
} from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      identifyList: [],
      identifyPackage: {},
      selectIdentifyId: 0,
      openPush: false,
      openAddVersion: false,
      version: {
        is_force_upgrade: 1,
        using_state: 1,
      },
      rules: {
        versions: [
          { required: true, message: "请输入版本号", trigger: "blur" },
        ],
        is_force_upgrade: [
          { required: true, message: "请选择是否强制升级", trigger: "change" },
        ],
        using_state: [
          { required: true, message: "请选择启用状态", trigger: "change" },
        ],
        version_number: [
          { required: true, message: "请输入版本数字标识", trigger: "blur" },
        ],
        notes: [{ required: true, message: "请填写备注信息", trigger: "blur" }],
      },
    };
  },
  methods: {
    async getIdentifyCount() {
      let data = await common(
        baseUrl.getIdentifyCount,
        { channel_id: this.$route.query.channel_id },
        null,
        "POST"
      );
      if (data.code != 1) {
        this.$message.error("暂无发布历史信息");
        this.$router.go(-1);
      }
      this.identifyList = data.data;
      if (data.data.length != 0) {
        this.selectIdentifyId = data.data[0].id;
        //查询渠道包路径
        this.getAppChannelPackageById(this.selectIdentifyId);
      }
    },
    async getAppChannelPackageById(id) {
      let data = await common(
        baseUrl.getAppChannelPackageById,
        { id },
        null,
        "POST"
      );
      this.identifyPackage = data.data;
      this.version.channel_id = this.identifyPackage.channel_id;
      this.version.realese_url = this.identifyPackage.package_url;
    },
    /**保存 */
    rowSave() {
      //校验参数的完整性
      this.$refs[`ruleForm`].validate(async (valid) => {
        if (valid) {
          delete this.version["id"];
          let userInfo = this.$store.state.user.userInfo;
          this.version.last_update_info = `<${
            userInfo.id ? userInfo.id + " " : ""
          }${userInfo.username}>`;
          let data = await common(
            versionManager.save,
            this.version,
            null,
            "POST"
          );
          if (data == null) {
            return;
          }
          if (data.code == 1) {
            this.openPush = false;
            this.openAddVersion = false;
          }
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认取消发布？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.getIdentifyCount();
  },
};
</script>

<style>
.select100{
  width: 100%;
}
</style>